<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!--[if lt IE 9]>
	      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	    <![endif]-->
		<!-- 引入bootstrap 样式文件 -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
		<!-- 引入我们自己的首页样式文件 -->
		<link rel="stylesheet" href="css/index1.css">
		<!-- 先引入jquery js文件 -->
		<script src="bootstrap/js/jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<title>阿里百秀</title>
	</head>

	<body>
		<div class="container">
			<div class="row">
				<nav class="navbar navbar-default">
					<div class="container-fluid">

						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				      </button>
							<a class="navbar-brand" href="#">阿里百秀</a>
						</div>

						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li class="active">
									<a href="#">生活馆 <span class="sr-only">(current)</span></a>
								</li>
								<li>
									<a href="#">自然汇</a>
								</li>
								<li>
									<a href="#">科技潮</a>
								</li>
								<li>
									<a href="#">奇趣事</a>
								</li>
								<li>
									<a href="#">美食街</a>
								</li>
							</ul>
							<form class="navbar-form navbar-left">
								<div class="form-group">
									<input type="text" class="form-control" placeholder="搜索">
								</div>
								<button type="submit" class="btn btn-default">搜索</button>
							</form>
							<ul class="nav navbar-nav navbar-right">
								<li>
									<a href="#" data-toggle="modal" data-target=".login">登录</a>
								</li>
								<li>
									<a href="#">注册</a>
								</li>
							</ul>
						</div>
					</div>
				</nav>
				<!--模态框-->
				<div class="modal fade login" tabindex="-1" role="dialog">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title">登录</h4>
							</div>
							<div class="modal-body">
								<form>
									<div class="form-group">
										<label for="exampleInputEmail1">邮箱地址</label>
										<input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱">
									</div>
									<div class="form-group">
										<label for="exampleInputPassword1">输入密码</label>
										<input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
									</div>
									<div class="checkbox">
										<label>
									      <input type="checkbox"> 记住用户名
									    </label>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary">登录</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<header class="col-md-2">
					<div class="logo">
						<a href="#">
							<img src="img/logo.png" class="hidden-xs" />
							<span class="visible-xs">阿里百秀</span>
						</a>
					</div>
					<div class="nav">
						<a href="#" class="glyphicon glyphicon-camera">生活馆</a>
						<a href="#" class="glyphicon glyphicon-picture">自然汇</a>
						<a href="#" class="glyphicon glyphicon-phone">科技潮</a>
						<a href="#" class="glyphicon glyphicon-gift">奇趣事</a>
						<a href="#" class="glyphicon glyphicon-glass">美食街</a>
					</div>
				</header>
				<article class="col-md-7">
					<div class="news clearfix">
						<ul>
							<!--<li>
	                            <a href="#">
	                                <img src="upload/lg.png" alt="">
	                                <p>阿里百秀</p>
	                            </a>
                        	</li>-->
							<li>
								<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

									<!-- Wrapper for slides -->
									<div class="carousel-inner" role="listbox">
										<div class="item active">
											<img src="upload/banner.dpg" alt="...">
											<div class="carousel-caption">
												阿里百秀1
											</div>
										</div>
										<div class="item">
											<img src="upload/banner1.dpg" alt="...">
											<div class="carousel-caption">
												阿里百秀2
											</div>
										</div>
										<div class="item">
											<img src="upload/banner2.dpg" alt="...">
											<div class="carousel-caption">
												阿里百秀3
											</div>
										</div>
									</div>

									<!-- Controls -->
									<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
										<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
										<span class="sr-only">Previous</span>
									</a>
									<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
										<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
										<span class="sr-only">Next</span>
									</a>
								</div>
								<script>
									$('.carousel').carousel({
										interval: 2000
									})
								</script>
							</li>
							<li>
								<a href="#">
									<img src="upload/1.jpg" alt="">
									<p>奇怪了 某小区门卫长的像马云 人们纷纷合影</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="upload/2.jpg" alt="">
									<p>奇怪了 某小区门卫长的像马云 人们纷纷合影</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="upload/3.png" alt="">
									<p>奇怪了 某小区门卫长的像马云 人们纷纷合影</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="upload/4.jpg" alt="">
									<p>奇怪了 某小区门卫长的像马云 人们纷纷合影</p>
								</a>
							</li>
						</ul>
					</div>
					<div class="publish">
						<div class="row">
							<div class="col-sm-9">
								<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
								<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
								<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！
								</p>
								<p class="text-muted">阅读(2417)评论(1)赞 (18)
									<span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
								</p>
							</div>
							<div class="col-sm-3 pic hidden-xs">
								<img src="upload/3.png" alt="" />
							</div>
						</div>
						<div class="row">
							<div class="col-sm-9">
								<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
								<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
								<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！
								</p>
								<p class="text-muted">阅读(2417)评论(1)赞 (18)
									<span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
								</p>
							</div>
							<div class="col-sm-3 pic hidden-xs">
								<img src="upload/3.png" alt="" />
							</div>
						</div>
						<div class="row">
							<div class="col-sm-9">
								<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
								<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
								<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！
								</p>
								<p class="text-muted">阅读(2417)评论(1)赞 (18)
									<span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
								</p>
							</div>
							<div class="col-sm-3 pic hidden-xs">
								<img src="upload/3.png" alt="" />
							</div>
						</div>
					</div>
					<nav aria-label="Page navigation">
						<ul class="pagination">
							<li>
								<a href="#" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<li>
								<a href="#">1</a>
							</li>
							<li>
								<a href="#">2</a>
							</li>
							<li>
								<a href="#">3</a>
							</li>
							<li>
								<a href="#">4</a>
							</li>
							<li>
								<a href="#">5</a>
							</li>
							<li>
								<a href="#" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>
				</article>
				<aside class="col-md-3">
					<a href="#" class="banner">
						<img src="upload/zgboke.jpg" />
					</a>
					<a href="#" class="hot">
						<span class="btn btn-primary">热搜</span>
						<h4 class="text-primary">欢迎加入中国博客联盟</h4>
						<p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
					</a>

					<div style="margin-top: 10px; ">

						<!-- Nav tabs -->
						<ul class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active">
								<a href="#home" aria-controls="home" role="tab" data-toggle="tab">热搜</a>
							</li>
							<li role="presentation">
								<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">排名</a>
							</li>

						</ul>

						<!-- Tab panes -->
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="home">大主宰</div>
							<div role="tabpanel" class="tab-pane" id="profile">第一名</div>

						</div>

					</div>
				</aside>
			</div>
		</div>
	</body>

</html>